<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="../../css/style.css" rel="stylesheet">

</head>
</head>
<body>
<div id="app">
  <show_add :a="4" :b="9" v-on:myclick="clickAdd"></show_add>
  <hr/>
  {{result}}
</div>
<!-- 1:引包 -->
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('show_add', {
    props: ['a', 'b'],
    template: `<div><button v-on:click="myadd">加法</button></div>`,
    methods: {
      'myadd': function () {
        var value = 0;
        value = this.a + this.b;
        this.$emit('myclick', {
          result: value
        })
      }
    }
  });
  new Vue({
    el:'#app',
    data:{result:0},
    methods:{
      clickAdd:function(prot){
        this.result=prot.result;
      }
    }
  })
</script>

</body>
</html>
